<template>
  <div class="person">
    <h2>人员的信息</h2>
    <h3>名字:{{ showPonserName }}</h3>
    <h3>年龄:{{ showPonserAge }}</h3>
    <input
      type="submit"
      value="确定"
      class="inpuClick"
      @click="showPersonClick"
    />
  </div>
</template>

<script>
export default {
  name: "Person",
  data() {
    return {
      showPonserName: "赵六",
      showPonserAge: "46",
    };
  },
  methods: {
    showPersonClick() {
      alert(`我叫${this.showPonserName},今年${this.showPonserAge}`);
    },
  },
};
</script>

<style scoped>
.person {
  background-image: linear-gradient(0deg, #9be15d 0%, #00e3ae 100%);
  padding: 5px;
  font-size: 20px;
  margin-top: 10px;
}
input {
  /* width: 50px; */
  padding: 20px;
  text-align: center;
  background-image: linear-gradient(
    0deg,
    #3ab5b0 0%,
    #3d99be 31%,
    #56317a 100%
  );
  color: white;
}
</style>
